<template>
  <u-tabbar
    :value="tabBarIndex"
    :placeholder="false"
    @change="tabBarChange"
    activeColor="#333333"
    inactiveColor="#A1A1A1"
    fixed
    :safeAreaInsetBottom="true"
  >
    <template v-for="(item, index) in list">
      <u-tabbar-item v-if="index == 1" :badge="badge" :text="item.text">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          :src="item.selectedIconPath"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          :src="item.iconPath"
        ></image>
      </u-tabbar-item>
      <u-tabbar-item v-else :text="item.text">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          :src="item.selectedIconPath"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          :src="item.iconPath"
        ></image>
      </u-tabbar-item>
    </template>
  </u-tabbar>
</template>
<script>
import {} from "@/api/api.js";
export default {
  props: {
    tabBarIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      badge: 0,
      list: [
        {
          pagePath: "/pages/home/home",
          text: "首页",
          iconPath: "../../static/icons/home.png",
          selectedIconPath: "../../static/icons/home-active.png",
        },
        {
          pagePath: "/pages/deviceManage/deviceManage",
          text: "设备管理",
          iconPath: "../../static/icons/facility.png",
          selectedIconPath: "../../static/icons/facility-active.png",
        },
        {
          pagePath: "/pages/inspection/inspection",
          text: "巡查记录",
          iconPath: "../../static/icons/patrol.png",
          selectedIconPath: "../../static/icons/patrol-active.png",
        },
        {
          pagePath: "/pages/myself/myself",
          text: "我的",
          iconPath: "../../static/icons/personCenter.png",
          selectedIconPath: "../../static/icons/personCenter-active.png",
        },
      ],
    };
  },
  methods: {
    tabBarChange(index) {
      uni.switchTab({
        url: this.list[index].pagePath,
      });
    },
    init() {
      // getRed().then((res) => {
      //   this.badge = res.result;
      // });
    },
  },
};
</script>
<style lang="scss">
.u-page__item__slot-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
